<template>
  <el-card shadow="hover" class="mt-10">
    <Chart height="500px" :option="option" />
  </el-card>
</template>

<script lang="ts" setup>
import echarts, { ECOption } from "@/utils/echarts";
import china from "./china";

defineOptions({
  name: "ChinaMap",
});

const data = china.features.map((map) => {
  return {
    name: map.properties.name,
    value: Math.round(Math.random() * 10000),
  };
});

// 注册地图
echarts.registerMap("china", china as any);

const option: ECOption = {
  title: {
    text: "新冠疫情分布图",
  },
  series: {
    name: "新冠疫情分布图",
    type: "map",
    map: "china",
    label: {
      show: true,
    },
    data,
  },
  tooltip: {},
  visualMap: {
    type: "piecewise",
    pieces: [
      { value: 0 },
      { min: 1, max: 9 },
      { min: 10, max: 99 },
      { min: 100, max: 999 },
      { min: 1000, max: 9999 },
      { min: 10000 },
    ],
  },
};
</script>

<style scoped lang="scss">
.mt-10 {
  margin-top: 10px;
}
</style>
